<!-- 可编辑单元格组件-->
<template>
  <div class="editable-cell">
    <liaBilitiesList ref="modalRef" :doindex="doindex" :uid='uid' :col="col" :stalid="stalid" @childByValue="childByValue"></liaBilitiesList>
    <div v-if="editable" class="editable-cell-input-wrapper">
      <div v-if="col=='FinaltermOne' || col=='BeginningOne' || col=='FinaltermTow' || col=='BeginningTow' ">
        <a-input style="width:80%;float:left" :value="value" ref="focusInput" @change="handleChange" @pressEnter="check" @blur="check" />
        <a-icon style="width:20%;float:right;line-height:26px" type="edit" @click="showBilities" />
      </div>
      <a-input style="text-align:right;" v-else-if="col=='Assetsa'" :value="value" ref="focusid" @change="handleChange" @pressEnter="check" @blur="check"></a-input>
      <a-input v-else :value="value" ref="focusid" @change="handleChange" @pressEnter="check" @blur="check" />
    </div>

    <div v-else class="editable-cell-text-wrapper" @click="edit">
      <div class="ellipsis-text">
        {{ value || '&nbsp;' }}
      </div>
    </div>
  </div>
</template>
<script>

import searchGroupDetail from "@/components/PopUpLayer/searchGroupDetail";
import liaBilitiesList from './liaBilitieslist'
import moment from "moment";
export default {
  props: {
    text: String,
    col: {
      type: String,
      default: ''
    },
    doindex: { //  行号
      type: Number,
      default: ''
    },
    record: {
      type: Object, // 点击行所有数据
      default: () => { }
    },
    dataSource: {
      type: Array,
      default: () => []
    }
  },
  components: {
    searchGroupDetail,
    liaBilitiesList
  },
  data () {
    return {
      value: this.text,
      editable: false,
      stalid: '',
      uid: '',
      beginAmountDirection: '',
      runsdata: [],
      liaArray: ['FinaltermOne', 'BeginningOne', 'FinaltermTow', 'BeginningTow']
    };
  },
  mounted () {

  },
  created () {
  },
  methods: {
    moment,
    childByValue (val) {
      this.runsdata = val;
      //  console.log( this.runsdata )
      this.$emit('runDataTale', this.runsdata)
    },
    //==========================默认输入框==========================
    handleChange (e) {
      const value = e.target.value;
      this.value = value;
    },
    check (type) {
      setTimeout(() => {
        this.editable = false;
        if (this.col == 'debitAmount' || this.col == 'creditAmount') {
          let reg = /^([-+])?\d+(\.[0-9]{1,2})?$/;
          if (!reg.test(this.value)) {
            this.value = null;
            return
          }
        }
        this.$emit("change", this.value);
      }, 200)


    },
    //==========================默认输入框==========================

    edit () {
      this.editable = true;
      if (this.col == 'FinaltermOne') {
        this.stalid = this.doindex;
        this.uid = this.record.Cid;
      }
      if (this.col == 'BeginningOne') {
        this.stalid = this.doindex;
        this.uid = this.record.Did;
      }
      if (this.col == 'FinaltermTow') {
        this.stalid = this.doindex;
        this.uid = this.record.Gid;
      }
      if (this.col == 'BeginningTow') {
        this.stalid = this.doindex;
        this.uid = this.record.Hid;
      }
      if (this.col == 'FinaltermOne' || this.col == 'BeginningOne' || this.col == 'FinaltermTow' || this.col == 'BeginningTow') {
        this.$nextTick(() => {
          this.$refs.focusInput.focus();
        })
      }

      if (this.col == 'Assetssa') {
        this.componentName = 'Assetssa';
        this.$nextTick(() => {
          this.$refs.focusid.focus();
        })
      } else {
        this.$nextTick(() => {
          if (this.$refs.focusid) {
            this.$refs.focusid.focus();
          }
        });
      }
      // 行标显示
      this.$emit('trademark',[this.col,this.doindex])

    },
    searchBackData (record) {
      console.log(record)
      this.editable = false;
      if (record) {
        console.log(record.constructor, record)
        if (record.constructor === Object || record.constructor === Array) {
          this.value = record.name;
          this.$emit("change", record);
        }
      } else {
        this.$emit("change");
      }
    },
    handleSelectChange (value, label) {
      console.log(value, label);
      this.editable = false;
      this.beginAmountDirection = label.componentOptions.propsData.label;
      this.value = label.componentOptions.propsData.label;
      this.$emit("change", value);
    },
    handleSelectBlur () {
      this.editable = false;
    },
    showBilities () {
      this.$refs.modalRef.showModal();
    }
  },
};
</script>
<style lang="less" scoped>
  .editable-cell {
    position: relative;
    height: 30px;
    line-height: 30px;
    width: 100%;
    margin: 0 auto;
    cursor: pointer;
    .ant-input {
      height: 30px;
      text-align: left;
      font-size: 13px;
      padding: 0;
      border: 1px solid #000 !important;
    }
    .ant-select-selection--single {
      height: 28px !important;
    }
    .ant-select-selection {
      border: 1px solid #000 !important;
    }
  }
  .editable-cell-input-wrapper {
    padding: 0;
  }
  .editable-cell-text-wrapper {
    padding: 0;
    height: 100%;
    width: 100%;
  }
  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    line-height: 18px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell:hover .editable-cell-icon {
    display: inline-block;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }

  .editable-cell-input-search {
    position: relative;
  }
</style>